<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>

<body>
   <iframe src="receptor.html"></iframe>
   <div id="mensaje">Esperando contestación...</div>
    
    <button>Enviar mensaje</button>

    <script>
      var iframe  = document.querySelector("iframe");
      var button  = document.querySelector("button");
      var mensaje = document.querySelector("#mensaje");

      var enviarMensaje = function(){
        iframe.contentWindow.postMessage("¿Como te llamas?", "http://receptor.com");
      };

      var recibirMensaje = function( evento ){
        if (evento.origin == "http://receptor.com")

          // Retrasamos la publicación del mensaje solo para hacerla de emoción.
          setTimeout(function(){
            mensaje.innerHTML = "Receptor: " + evento.data;
          }, 3000);

      };

      button.addEventListener("click", enviarMensaje, false);
      window.addEventListener("message", recibirMensaje, false);
    </script>
</body>
</html>
